import React, { Component } from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types';

import CommentAdd from '../../components/comment-add/comment-add';
import CommentList from '../../components/comment-list/comment-list';
import { addComment, delComment, getComments } from '../../redux/actions';

class App extends Component {
	componentDidMount() {
		this.props.getComments()
	}

	render() {
		const { comments, addComment, delComment } = this.props
		return (
			<div id="app">
				<div>
					<header className="site-header jumbotron">
						<div className="container">
							<div className="row">
								<div className="col-xs-12">
									<h1>请发表对React的评论</h1>
								</div>
							</div>
						</div>
					</header>
					<div className="container">
						<CommentAdd addComment={addComment} />
						<CommentList comments={comments} delComment={delComment} />
					</div>
				</div>
			</div>
		)
	}
}

App.propTypes = {
	comments: PropTypes.array.isRequired,
	addComment: PropTypes.func.isRequired,
	delComment: PropTypes.func.isRequired,
	getComments: PropTypes.func.isRequired,
}

export default connect(
	state => ({ comments: state.comments }),
	{ addComment, delComment, getComments }
)(App);